<template>
  <!-- 标签 -->
        <div class="guess">
            <div class="guess_head clearfix">
              <h3>猜你想找</h3>
              <a href="javascript:;">查看更多 ></a>
            </div>
            <!-- 标签 -->
            <ul class="label_box clearfix">
              <li v-for="(bq, i) in randomlabel.slice(0, 8)" :key="i">
                <i v-show="bq.scan >= 6500">热</i
                ><a href="javascript:;"
                  >#{{ bq.label.slice(0, bq.label.indexOf(",")) }}</a
                >
              </li>
            </ul>
        </div>
</template>

<script>
export default {
  data() {
    return {
      randomlabel:[],
    }
  },
  methods:{
    // 加载猜你想找标签
    loadRandomlabel() {
      // 通过axios  发送ajax请求，访问类别列表
      this.axios.get("/strategy/randomlabel").then((res) => {
        let randomla = [];
        res.data.forEach((bq) => {
          if (bq.label) {
            randomla.push(bq);
          }
        });
        this.randomlabel = randomla;
      });
    },
  },
  mounted() {
    // 加载猜你想找标签
    this.loadRandomlabel();
  },
}
</script>


<style scoped>
/* 攻略标签样式 */
a,
span,
b,
i,
em {
  display: inline-block;
  font-style: normal;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
.guess_head {
  margin-bottom: 24px;
  height: 24px;
  line-height: 24px;
}
.guess_head h3 {
  font-size: 24px;
  font-weight: normal;
  float: left;
}
.guess_head a {
  float: right;
  font-size: 14px;
  padding-right: 14px;
}
.guess_head a:hover {
  color: #f83244;
}
.label_box {
  width: 320px;
  background: #ffffff;
  box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
  border-radius: 6px;
  padding: 24px;
  padding-bottom: 7px;
  margin-bottom: 40px;
}
.label_box li {
  float: left;
  width: 117px;
  height: 22px;
  margin: 0 18px 17px 0;
  font-size: 14px;
}
.label_box li i {
  font-style: normal;
  background: #f83244;
  height: 18px;
  width: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 3px;
  color: #fff;
  margin-right: 8px;
  font-size: 12px;
  vertical-align: top;
}
.label_box li a {
  width: 90px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.label_box li a:hover {
  color: #f83244;
}
</style>